$(function () {
    //初始化轮播图
    $("#slider").slidebox({
        boxh: 500,//盒子的高度
        w: 1200,//图片的宽度
        h: 400,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 12,//控制按钮宽度
        controlsH: 12,//控制按钮高度
        radius: 6//控制按钮圆角度数
    });

    // 手写轮播图
    // 1. 绑定【换一批】按钮的点击事件
    // 2. 声明计数器0
    // 3. 点击后计数器+1（移动前/移动后）
    // 4. 移动：top:    获取li元素的高度.innerHeight() * 计数器 * -1
    // 5. 判断是否到了最后一个元素（车厢数量length - 1）
    // * 如果到了  瞬间变化top:0
    // * 索引置为0
    // 添加小手
    $('#changeBtn').css('cursor', 'pointer');
    let liHeight = $('.myslide-box>ul>li:first').innerHeight();
    let $ul = $('.myslide-box>ul');
    // 末尾追加一个和第一个的元素
    // 克隆第一个元素
    let $lastElement = $('.myslide-box>ul>li:first').clone(true);
    // 追加到ul火车中
    $ul.append($lastElement);

    let maxLength = $('.myslide-box>ul>li').length;
    let index = 0;

    // 立即执行：函数防抖。1秒
    let lastClickedTime; // 记录上次点击时间

    $('#changeBtn').click(function () {
        // 获取当前时间毫秒值
        let nowClickedTime = Date.now();
        // 如果 是非首次 ： 判断时间
        if (lastClickedTime && nowClickedTime - lastClickedTime <= 1000) {
            // 记录最后一次点击事件
            lastClickedTime = nowClickedTime;
            return
        } else {
            lastClickedTime = nowClickedTime;
            // 火车头当前是0. animate的时候 top: -550
            index++;
            let offsetTop = liHeight * index * -1;
            // 滚动
            $('.myslide-box>ul').stop(true).animate({ top: offsetTop }, 1000, function () {
                // 动画结束后的回调函数
                console.log(index);
                // 最多目前可以到2
                if (index >= maxLength - 1) {
                    $ul.css('top', '0px');
                    index = 0;
                    console.log('到底啦');
                }

            });
        }
        // 如果是首次 执行
        // if (!lastClickedTime) {
        //     // 初次点击可以继续执行
        //     // 由于：第二次点击时 需要对比第一次点击的时间
        //     // 所以：在点击继续执行的同时，要记录这次点击的时间
        //     lastClickedTime = nowClickedTime;
        //     // 火车头当前是0. animate的时候 top: -550
        //     index++;
        //     let offsetTop = liHeight * index * -1;
        //     // 滚动
        //     $('.myslide-box>ul').stop(true).animate({ top: offsetTop }, 1000, function () {
        //         // 动画结束后的回调函数
        //         console.log(index);
        //         // 最多目前可以到2
        //         if (index >= maxLength - 1) {
        //             $ul.css('top', '0px');
        //             index = 0;
        //             console.log('到底啦');
        //         }
        //     });
        // } else {
        //     // 非首次点击
        //     // 对比上次 last 和 now之间有没有满足时间差1秒
        //     if (nowClickedTime - lastClickedTime <= 1000) {
        //         return;  // 不执行
        //     } else {
        // lastClickedTime = nowClickedTime;
        // // 火车头当前是0. animate的时候 top: -550
        // index++;
        // let offsetTop = liHeight * index * -1;
        // // 滚动
        // $('.myslide-box>ul').stop(true).animate({ top: offsetTop }, 1000, function () {
        //     // 动画结束后的回调函数
        //     console.log(index);
        //     // 最多目前可以到2
        //     if (index >= maxLength - 1) {
        //         $ul.css('top', '0px');
        //         index = 0;
        //         console.log('到底啦');
        //     }

        // });
        //     }
        // }



    })
})